<template>
  <Header></Header>
    <div class="fixed">
      <div class="bgColor">
        <h1 class="main-shopcart">购物车</h1>
      </div>
      <div class="container">
        <div class="main">
          
		<!-- 购物车主要内容区 -->
    <div class="content" v-if="showList.length>0">
      <ul>
        <!-- 购物车表头 -->
        <li class="headerShop">
          <div class="pro-check">
            <el-checkbox v-model="isAllCheck" @click="checkAllCart">全选</el-checkbox>
          </div>
          <div class="pro-img"></div>
          <div class="pro-name">商品名称</div>
          <div class="pro-price">单价</div>
          <div class="pro-num">数量</div>
          <div class="pro-total">小计</div>
          <div class="pro-action">操作</div>
        </li>
        <!-- 购物车表头END -->

        <!-- 购物车列表 -->
        <li class="product-list" v-for="(item,index) in showList" :key="item.cartId">
          <div class="pro-check">
            <el-checkbox :value="item.cartChoose=='是'" @change="checkChange($event,index)"></el-checkbox>
          </div>
          <div class="pro-img">
            <router-link :to="{ path: '/goods/detail', query: {productId:item.cartProductId} }">
              <img src="../assets/images/flower.jpg" />
            </router-link>
          </div>
          <div class="pro-name">
            <router-link
              :to="{ path: '/goods/detail', query: {productId:item.cartProductId} }"
            >{{item.cartProductName}}</router-link>
          </div>
          <div class="pro-price">{{item.cartPrice}}元</div>
          <div class="pro-num">
		  {{item.cartProductSale}}
       <!--    <el-input-number
              size="small"
              :value="item.cartPorductSale"
              @change="handleChange($event,index,item.cartProductId)"
              :min="1"
              :max="item.maxNum"
            ></el-input-number> -->
          </div>
          <div class="pro-total pro-total-in">{{item.cartPrice*item.cartProductSale}}元</div>
          <div class="pro-action">
            
            
              <div style="text-align: right; margin: 10px 0 0">
                <el-button @click="deleteItem($event,item.cartId,item.cartProductId)"
                >删除</el-button>
              </div>
         
   
          </div>
        </li>
        <!-- 购物车列表END -->
      </ul>
      <div style="height:20px;background-color: #f5f5f5"></div>
      <!-- 购物车底部导航条 -->
      <div class="cart-bar">
        <div class="cart-bar-left">
          <span>
            <router-link to="/goods">继续购物</router-link>
          </span>
          <span class="sep">|</span>
          <span class="cart-total">
            共
            <span class="cart-total-num">{{getNum}}</span> 件商品，已选择
            <span class="cart-total-num">{{getCheckNum}}</span> 件
          </span>
        </div>
        <div class="cart-bar-right">
          <span>
            <span class="total-price-title">合计：</span>
            <span class="total-price">{{getTotalPrice}}元</span>
          </span>
          <router-link :to="getCheckNum > 0 ? '/confirmOrder' : ''">
            <div :class="getCheckNum > 0 ? 'btn-primary' : 'btn-primary-disabled'">去结算</div>
          </router-link>
        </div>
      </div>
      <!-- 购物车底部导航条END -->
    </div>
    <!-- 购物车主要内容区END -->
    </div>
	</div>
	</div>
    <div class="pagination">
				   <el-pagination  small background layout="total,prev, pager, next"
					:total="totalItems"
					:page-size="pageSize"
					v-model:current-page="currentPage"
					@current-change="handleCurrentChange"
					style="margin-top: 20px;margin-left: 40%;" />
			</div>
  <Foot></Foot>
</template>

<script setup lang="ts">
//组件

import {getShopCarList,del} from '@/api/shoppingcart'
import { onBeforeMount,onMounted, ref } from "vue";
import {useCartStore} from '@/stores/cart'
import { storeToRefs } from 'pinia';
let cartStore = useCartStore();
let {  checkAll , total  , select ,all} = storeToRefs(cartStore);
import { ElMessageBox } from 'element-plus';
import { ElMessage } from 'element-plus';
import { useAuthStore} from "@/stores";
// let cartStore=useCartStore();
// onBeforeMount(() => {
//   getShopCarList().then(res=>{
//     cartStore.addCart(res.data.list);
//     console.log(res.data.list);
    
//   })
// }),
const pageSize = ref([])
const dataList=ref([])//取到的结果
const showList=ref([])//分页展示列
const currentPage = ref(1)
const totalItems = ref(1)
const cartList=ref([])
const fillist = ref()
const keyWord=ref('')
const userStore = useAuthStore();
let isAllCheck = false;
let id = userStore.user.sub

 isAllCheck =  cartStore.getIsAllCheck;
 console.log("isAllCheck????????????????????",isAllCheck)
function checkAllCart(){
	if(isAllCheck){
	cartStore.chooseAll("否");
	}else{
		cartStore.chooseAll("是");
	}

}
// 设置全选状态
// function setIsAllCheck(val) {
//   this.checkAll(val);
// }

const page = ref({//配置对应的查询参数
      pageNum: 1,
      pageSize: 30,
    });
const handleCurrentChange = (val: number) => {
console.log(`current page: ${val}`)
page.value.pageNum = val
console.log(page)
getCart(page);
}
function getCart(p){
	getShopCarList(p).then((res) => {
	console.log("页面查询结果",res)
		 cartList.value = res.data
		 showList.value = cartList.value.records
		 console.log("cartList",showList.value)
		 // navigatePages
		 totalItems.value=cartList.value.total
		 currentPage.value = cartList.value.current
		 pageSize.value = cartList.value.size
		 console.log("current",currentPage.value)
		 })
		 }
	
     getCart(page);
	  const fnCheckAll = ()=>{
	  if( checkAll.value ){
		cartStore.unAll();
	  }else{
		cartStore.all();
	  }
}
    function checkChange(val, key) {
      // 更新vuex中购物车商品是否勾选的状态
       // 更新vuex中购物车商品是否勾选的状态
       cartStore.updateShoppingCart({ key: key, prop: "cartChoose", val: val });

	  
    }
	
    function deleteItem(e, cartId, cartproductID) {
		ElMessageBox.confirm('确定删除该商品吗？', '删除', {
		 confirmButtonText: '确定',
		 cancelButtonText: '取消',
		 type: 'warning'
	   }).then(() => {
			del(cartId).then((res) => {
			  switch (res.data.code) {
				case '200':
				  // “001” 删除成功
				  // 更新vuex状态
				  cartStore.deleteShoppingCart(cartId);
				  // 提示删除成功信息
				   console.log("删除成功！",res.data.msg);
				   location.reload();
				  // this.notifySucceed(res.data.msg);
				  break;
				default:
				  // 提示删除失败信息
				 console.log("删除失败！",res.data.msg);
			  }
			})
			.catch(err => {
			  return Promise.reject(err);
			});
		 ElMessage.success({
		   message: '删除成功!'
		 });
	   }).catch(() => {
		 ElMessage.info({
		   message: '已取消删除'
		 });
	   });

    }

</script>
<style scoped>
.fixed{
  width: 100%;
  height: 100%;
  background: #FFFFFF;
}
.bgColor{
  width: 100%;
  height: 200px;
  background-color: red;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.container{
  width: 1300px;
  margin: -100px auto 50px auto;
  background: #EBEDF2;
  border-radius: 12px;
  box-shadow: 0px 2px 5px #888888;
}
.main{
  padding:20px;
  border-radius: 5px;
}
.main-shop{
  position: relative;
  display: flex;
  align-content: center;
}
.main-shop i{
  font-size: 35px;
  padding: 20px 10px 0 0;
  color: #FF4400;
  font-weight: bold;
}
.main-shopcart{
  width: 1200px;
  margin: 0 auto;
  height: 42px;
  font-size: 24px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  line-height: 35px;
  color: #FFFFFF;
  padding: 30px 0;
  opacity: 1;
}
.nav{
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid #E6E6E6;

}
.nav .left{
  width: 80px;
  height: 26px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  line-height: 0px;
  color: #FF4400;
  opacity: 1;
  border-bottom: 2px solid #FF4400;
}
.nav .right{
  width: 108px;
  height: 24px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 0px;
  color: #333333;
  opacity: 0.5;
}

/* 头部开始 */
.head{
  display: flex;
  padding: 0 10px;
  margin: 20px 0;
  width: 100%;
  height: 35px;
  line-height: 35px;
  background: #FCFCFC;
  opacity: 1;
  border-radius: 0px;
  box-sizing: border-box;
  border-radius: 5px;
  box-shadow: 0px 2px 5px 2px #cccccc;
}
.head .item{
  width: 150px;
  font-size: 14px;
  color: #333333;
}
.check .all{
  margin-right: 10px;
}
.check .text{
  width: 1487px;
  height: 40px;

}
.classInfo{
  width: 400px!important;
  color: #333333;
}
/* 头部结束 */

/* 订单开始 */
.haveorder{
  display: flex;
  width: 100%;
  height: 200px;
  background: #FCFCFC;
  margin-bottom: 10px;
  border-radius: 5px;
  box-shadow: 0px 2px 5px 2px #cccccc;
}
.haveorder .order-item{
  height: 200px;
  line-height: 200px;
  margin:  5px;
}
.order-item:first-child{
  width: 30px;
}
.order-item{
  width: 150px;
  font-size: 16px;
  color: #333333;
}
.totoalprice{
  color: #E2231A;
}
.num{
  width: 120px !important;
  padding-left: 15px;
}
.pro-num {
  float: left;
  width: 150px;
  text-align: center;
}
.info{
  display: flex;
  width: 470px !important;
  height: 200px;
  line-height: 200px;
}
.courseimg{
  margin:40px 20px 40px 0;
  width: 200px;
  height: 120px;
}
.courseimg img{
  width: 100%;
  height: 100%;
}
.info .course-name{
  width: 300px;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.delete{
  cursor: pointer;
}
.deletd-text{
  margin-left: 5px;
}

/* 订单结束 */

/* 暂无订单开始 */
.noOrder{
  width: 100%;
  height: 100%;
  text-align: center;
  margin:200px 0;
}
.order-alert{
  height: 31px;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 0px;
  color: #B5B9BC;
  opacity: 1;
  margin:20px 120px;

}
/* 暂无订单结束 */
.foot{
  display: flex;
  justify-content: flex-end;
  width: 100%;
  height: 40px;
  line-height: 40px;
  color: #333333;
  margin-bottom: 10px;
}
.foot-item{
  width: 120px;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  font-weight: 400;
  color: #333333;
}
.unique{
  margin-left: 5px;
  font-size: 24px;
  color: #FF4400;
}
.btn{
  width: 120px;
  height: 40px;
  margin-left: 20px;
  border: none;
  color: #FFFFFF;
  font-size: 22px;
  border-radius: 5px;
  background: #FF4400;
  cursor: pointer;
  box-shadow: 0px 3px 5px 2px #ff727f;
}

/* 购物车头部CSS */
.cart-header {
  height: 64px;
  border-bottom: 2px solid #ff6700;
  background-color: #fff;
  margin-bottom: 20px;
}
.cart-header .cart-header-content {
  width: 1225px;
  margin: 0 auto;
}
.cart-header p {
  font-size: 28px;
  line-height: 58px;
  float: left;
  font-weight: normal;
  color: #424242;
}
.cart-header span {
  color: #757575;
  font-size: 12px;
  float: left;
  height: 20px;
  line-height: 20px;
  margin-top: 30px;
  margin-left: 15px;
}
/* 购物车头部CSS END */

/* 购物车主要内容区CSS */
.content {
  width: 1225px;
  margin: 0 auto;
  background-color: #fff;
}

.content ul {
  background-color: #fff;
  color: #424242;
  line-height: 85px;
}
/* 购物车表头及CSS */
.headerShop {
  height: 85px;
  padding-right: 26px;
  color: #424242;
}
.content ul .product-list {
  height: 85px;
  padding: 15px 26px 15px 0;
  border-top: 1px solid #e0e0e0;
}
.content ul .pro-check {
  float: left;
  height: 85px;
  width: 110px;
}
.content ul .pro-check .el-checkbox {
  font-size: 16px;
  margin-left: 24px;
}
.content ul .pro-img {
  float: left;
  height: 85px;
  width: 120px;
}
.content ul .pro-img img {
  height: 80px;
  width: 80px;
}
.content ul .pro-name {
  float: left;
  width: 380px;
}
.content ul .pro-name a {
  color: #424242;
}
.content ul .pro-name a:hover {
  color: #ff6700;
}
.content ul .pro-price {
  float: left;
  width: 140px;
  padding-right: 18px;
  text-align: center;
}
.content ul .pro-num {
  float: left;
  width: 150px;
  text-align: center;
}
.content ul .pro-total {
  float: left;
  width: 120px;
  padding-right: 81px;
  text-align: right;
}
.content ul .pro-total-in {
  color: #ff6700;
}
.content ul .pro-action {
  float: left;
  width: 80px;
  text-align: center;
}
.content ul .pro-action i:hover {
  color: #ff6700;
}
/* 购物车表头及CSS END */

/* 购物车底部导航条CSS */
.cart-bar {
  width: 1225px;
  height: 50px;
  line-height: 50px;
  background-color: #fff;
}
.cart-bar .cart-bar-left {
  float: left;
}
.cart-bar .cart-bar-left a {
  line-height: 50px;
  margin-left: 32px;
  color: #757575;
}
.cart-bar .cart-bar-left a:hover {
  color: #ff6700;
}
.cart-bar .cart-bar-left .sep {
  color: #eee;
  margin: 0 20px;
}
.cart-bar .cart-bar-left .cart-total {
  color: #757575;
}
.cart-bar .cart-bar-left .cart-total-num {
  color: #ff6700;
}
.cart-bar .cart-bar-right {
  float: right;
}
.cart-bar .cart-bar-right .total-price-title {
  color: #ff6700;
  font-size: 14px;
}
.cart-bar .cart-bar-right .total-price {
  color: #ff6700;
  font-size: 30px;
}
.cart-bar .cart-bar-right .btn-primary {
  float: right;
  width: 200px;
  text-align: center;
  font-size: 18px;
  margin-left: 50px;
  background: #ff6700;
  color: #fff;
}
.cart-bar .cart-bar-right .btn-primary-disabled {
  float: right;
  width: 200px;
  text-align: center;
  font-size: 18px;
  margin-left: 50px;
  background: #e0e0e0;
  color: #b0b0b0;
}
.cart-bar .cart-bar-right .btn-primary:hover {
  background-color: #f25807;
}
/* 购物车底部导航条CSS END */
/* 购物车主要内容区CSS END */

/* 购物车为空的时候显示的内容CSS */
.cart-empty {
  width: 1225px;
  margin: 0 auto;
}
.cart-empty .empty {
  height: 300px;
  padding: 0 0 130px 558px;
  margin: 65px 0 0;
  background: url(../assets/imgs/cart-empty.png) no-repeat 124px 0;
  color: #b0b0b0;
  overflow: hidden;
}
.cart-empty .empty h2 {
  margin: 70px 0 15px;
  font-size: 36px;
}
.cart-empty .empty p {
  margin: 0 0 20px;
  font-size: 20px;
}
</style>